import React from 'react';
import { View, StyleSheet, Platform, StatusBar } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

interface SafeAreaWrapperProps {
    children: React.ReactNode;
    backgroundColor?: string;
    showTopSafeArea?: boolean;
    showBottomSafeArea?: boolean;
}

const SafeAreaWrapper: React.FC<SafeAreaWrapperProps> = ({
    children,
    backgroundColor = '#f5f5f5',
    showTopSafeArea = true,
    showBottomSafeArea = true,
}) => {
    // 使用react-native-safe-area-context获取安全区域信息
    const insets = useSafeAreaInsets();

    // 获取状态栏高度 - 参考Header组件的逻辑
    const getStatusBarHeight = () => {
        if (Platform.OS === 'android') {
            return StatusBar.currentHeight || 0;
        }
        return 0;
    };

    // 获取底部安全区域高度 - 使用react-native-safe-area-context动态获取
    const getBottomSafeAreaHeight = () => {
        // 直接使用insets.bottom，这是系统提供的真实底部安全区域高度
        return insets.bottom;
    };

    // 添加日志输出，方便调试
    const statusBarHeight = getStatusBarHeight();
    const bottomSafeAreaHeight = getBottomSafeAreaHeight();

    // console.log('=== SafeAreaWrapper 调试信息 ===');
    // console.log('平台:', Platform.OS);
    // console.log('顶部状态栏高度:', statusBarHeight);
    // console.log('底部安全区域高度:', bottomSafeAreaHeight);
    // console.log('insets.top:', insets.top);
    // console.log('insets.bottom:', insets.bottom);
    // console.log('insets.left:', insets.left);
    // console.log('insets.right:', insets.right);
    // console.log('==============================');

    return (
        <View style={[
            styles.container,
            { backgroundColor },
            showTopSafeArea && { paddingTop: statusBarHeight },
            showBottomSafeArea && { paddingBottom: bottomSafeAreaHeight }
        ]}>
            {children}
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
});

export default SafeAreaWrapper;
